<template>
<div class="pro-like">
    <h5>
        <i class="lyf-icons"></i>
        猜你喜欢
    </h5>  
    <div class="swiper-container">
        <ul class="swiper-wrapper clearfix"> 
            <li class="swiper-slide" v-for="(cartItem,index) in cartSwiper.slice(15)" :key="index"> 
            <div class="item" v-for="(cartItem,index) in cartSwiper.slice(index*4,(index+1)*4)" :key="index">
                <router-link to="/goodDetail"> 
                    <div class="pro-wrap">
                        <div class="pro-img">
                            <img :src="cartItem.srcImgUrl">
                        </div>
                        <h4 class="pro-title ui-ellipsis">{{cartItem.mpName}}</h4>
                        <p class="pro-space" >
                            <img  :src="imgUrl.tagUrl" v-if="cartItem.tagList" v-for="imgUrl in cartItem.tagList">
                        </p> 
                        <p class="pro-price">
                            <span class="price" v-if="cartItem.promotionPrice">￥{{cartItem.promotionPrice}}</span>
                            <span class="ori-price" v-if="cartItem.promotionPrice">￥{{cartItem.price}}</span>
                            <span class="ori-pri" v-else="cartItem.price">￥{{cartItem.price}}</span>
                        </p>
                        <i class="icon-cart icons4" @click.prevent="add(cartItem)"></i>
                    </div>
                </router-link> 
                </div>

            </li>
        </ul> 
        <!-- 如果需要分页器 --> 
        <div class="swiper-pagination"></div> 
    </div>
</div>
    
</template>
<script>
 
export default{
    data(){
        return {
            cartSwiper:[],
        }
    },
    methods:{
        add(item){
            this.$store.commit("addItem",item);
        }
    },
    mounted(){
       new Swiper ('.pro-like .swiper-container', {
//          loop: true,
            observer:true,
            pagination: '.swiper-pagination',
        }); 
        fetch("/static/data/cart/home.json")
            .then((res)=>{
            return res.json();
            })
            .then((res)=>{
            console.log(res.data.dataList);
            this.cartSwiper = res.data.dataList;
        })
    }
}
</script>
<style lang="less" scoped>
.pro-like{
    position:relative;
    border-top:.01rem solid #f0f0f0;
    margin-top:.35rem;
    margin-bottom:.5rem;
    h5{
        position:absolute;
        width:1.3rem;
        height:.4rem;
        line-height:.4rem;
        text-align:center;
        font-size:.15rem;
        top:-.2rem;
        left:35%;
        .lyf-icons{
            width:.16rem;
            height:.16rem;
            background-position:-.2rem -3.99rem;
        }
    }
}
.swiper-container {
    width:100%;
}
.swiper-wrapper{
    padding:.20rem .05rem .10rem .05rem;
    box-sizing:border-box;
}
.swiper-slide{
    .item{
    width:50%;
    float:left;
    border-top:.09rem solid #f0f0f0;
    border-right:.09rem solid #f0f0f0;;
    margin-bottom:.03rem;
    width:50%;
    float:left;
    box-sizing:border-box;
}
    
}
.pro-wrap{
    padding: .05rem .09rem;
    position:relative;
    background-color:#fff;
}
.pro-img{
    padding-bottom:.11rem;
    img{
        width:100%;
    }

}
.pro-title{
    height:.16rem;
    font-size:.13rem;
    color:#333;
    line-height:.16rem;
    font-weight:400;
}
.pro-space{
    height:.22rem;
    margin-top:.05rem;
    img{
        width:20%;
        display:inline-block;
    }
}
.pro-price{
    height:.21rem;
    .ori-price{
        text-decoration:line-through;
    }
    .ori-pri{
        color:#ff6900;
        font-size:.14rem;
    }
}
.pro-talk{
    height:.16rem;
}
.icon-cart{
    width:.25rem;
    height:.25rem;
    position:absolute;
    right:.08rem;
    bottom:.09rem;
    background-position:-.37rem -2.45rem;
}
.price{
    color:#ff6900;
    font-size:.14rem;
}
.talk-item{
    color:#ff6900;
}
.swiper-slide a{
    display:block;
}
.swiper-pagination{
    width:1rem;
    height:.24rem;
    border-radius:.1rem;
    background:#fff;
    line-height:.24rem;
    position:static;
    margin:0 auto .2rem auto;
}
.swiper-pagination-bullet-active{
    background-color:red;
}
</style>